<template>
  <PageWrapper>
    <template #headerContent>
      <WorkbenchHeader />
      <QuickNav :loading="loading" class="enter-y" />
    </template>
    <div class="lg:flex">
      <div class="lg:w-1/3 w-full enter-y">
        <ReceivedRadar :chart-data="returnData" :loading="loading" class="enter-y" />
      </div>
      <div class="lg:w-1/3 w-full enter-y">
        <ReceiveDetailPie :chart-data="returnData.contractList" :loading="loading" class="enter-y" />
      </div>
      <div class="lg:w-1/3 w-full enter-y">
        <NotReceiveDetailPie :chart-data="returnData.notReceivedList" :loading="loading" class="enter-y" />
      </div>
    </div>
    <div class="lg:flex">
      <div class="lg:w-3/3 w-full enter-y">
        <ContractMonthBar :chart-data="returnData.monthDataFinishedContract" :loading="loading" class="enter-y" />
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, } from 'vue';
import { PageWrapper } from '/@/components/Page';

import WorkbenchHeader from './components/WorkbenchHeader.vue';
import QuickNav from './components/QuickNav.vue';

import ReceivedRadar from './components/ReceivedRadar.vue';
import NotReceiveDetailPie from './components/NotReceiveDetailPie.vue';
import ReceiveDetailPie from './components/ReceiveDetailPie.vue';
import ContractMonthBar from './components/ContractMonthBar.vue';

import { homeSummary, } from '/@/api/business/summary';


export default defineComponent({
  components: { PageWrapper, WorkbenchHeader, QuickNav, ReceivedRadar, NotReceiveDetailPie, ReceiveDetailPie, ContractMonthBar, },
  setup() {

    const returnData = ref({
      monthDataNewContract: [],
      monthDataReceived: [],
      monthDataFinishedContract: [],
      notReceivedList: [],
      contractList: [],
    });

    //查询
    const loading = ref(true); //正在加载，子页面不渲染
    const search = async () => {
      let param = {}
      const res = await homeSummary(param);

      //明细数据
      returnData.value = res;
      loading.value = false

      console.log('首页统计->查询参数：', param);
      console.log('首页统计->返回数据：', res);
    }

    onMounted(() => {
      //默认查询
      search();
    });

    return { loading, returnData, };
  },
});
</script>
